<script setup lang='ts' name="house-examine">
import type { VxeGridInstance, VxeGridListeners } from 'vxe-table'

import { userAuthInfo } from '@fl/api/iam-api'
import { flowHttp } from '@fl/api/work-flow'
import { ElCard } from 'element-plus'
import { useRouter } from 'vue-router'

import type { IRowV0 } from './types'

import { useForm } from './hooks/use-form'
import { useTable } from './hooks/use-table'

const { gridOptions, useFilter, useQuery } = useTable()
const { form, schema } = useForm()
const router = useRouter()

type seachOrderBtnTy = {
    id: number
    text: string
}
const btnId = ref(1)
const orderBtn = reactive<seachOrderBtnTy[]>([
    {
        id: 1,
        text: '全部',
    },
    {
        id: 2,
        text: '审批中',
    },
    {
        id: 3,
        text: '通过',
    },
    {
        id: 4,
        text: '驳回',
    },
])
const addDialog = ref(false)
const detail = ref<any>({})
const addItemRef = ref()
const xGrid = ref<VxeGridInstance<IRowV0>>()

const gridEvents: VxeGridListeners<IRowV0> = {
    pageChange({ currentPage, pageSize }) {
        if (gridOptions.pagerConfig) {
            gridOptions.pagerConfig.currentPage = currentPage
            gridOptions.pagerConfig.pageSize = pageSize
        }
        getData()
    },
}

function reset() {
    form.value = {
        CreatedName: '',
        huxmc: '',
        shangjspzt: '',
        suosqy: '',
        xiangmmc: '',
        xingzqh: '',
    }
    getData()
}

function doAction(row: any) {
    detail.value = row
    addDialog.value = true
    // addItemRef.value.init(false)
    console.log(`output->detail.value`, detail.value)
    router.push({ path: '/house-source-center/lease-approval/add-house-examine', query: detail.value })
}

function checkBtnFn(item: any) {
    btnId.value = item.id
    form.value.shangjspzt = item.id === 1 ? '' : item.text
    console.log(item, 'item.valuecheckBtnFn')
    getData()
}
function init() {
    userAuthInfo().then((res) => {
        console.log('userAuthInfo---', res)
        window.sessionStorage.setItem('USER_ID', res.id)
    })

    getData()
}
init()
async function getData() {
    const { currentPage, pageSize } = gridOptions.pagerConfig
    gridOptions.loading = true
    flowHttp('query', {
        body: {
            data: {
                code: 'ac13f3a52c1ffa51',
                filter: useFilter(form.value),
                pageInfo: {
                    page: currentPage,
                    size: pageSize,
                },
                requireCount: '1',
            },
        },
    }).then((res: any) => {
        console.log(`output->ress`, res)
        const data = res?.data.data.Datas ?? []
        gridOptions.loading = false

        // TODO：前端查询
        const filterData = useQuery(data, form.value)
        console.log('前端查询---', filterData)

        // 前端分页
        // const { list, total } = usePage(filterData, gridOptions)
        gridOptions.pagerConfig.total = res?.data.data.PagingInfo?.DataCount
        gridOptions.data = data
    })
}
</script>

<template>
    <ElCard class="mb-20">
        <PlusForm v-model="form"
                  :row-props="{ gutter: 20 }"
                  :columns="schema"
                  label-width="100"
                  label-position="right"
                  :col-props="{
                      span: 16,
                  }"
                  style="position: relative;"
        >
            <template #footer>
                <div class="ml-auto"
                     style="position: absolute;right:0;top: 50px;"
                >
                    <el-button type="primary"
                               @click="getData"
                    >
                        查询
                    </el-button>

                    <el-button @click="reset">
                        重置
                    </el-button>
                </div>
            </template>
        </PlusForm>

        <el-divider />

        <div class="mb-20">
            <span mr-20>上架审批状态</span>

            <el-button v-for="item in orderBtn"
                       :key="item.id"
                       :color="item.id === btnId ? '#DA0004' : ''"
                       @click="checkBtnFn(item)"
            >
                {{ item.text }}
            </el-button>
        </div>
    </ElCard>

    <ElCard>
        <div mb-20>
            <el-button style="color: red;border:1px solid red">
                批量审批
            </el-button>
        </div>
        <!-- 列表 -->
        <vxe-grid ref="xGrid"
                  v-bind="gridOptions"
                  perfect
                  v-on="gridEvents"
        >
            <template #status="{ row }">
                <div style="cursor: pointer;">
                    <el-button v-if="row.shangjspzt === '通过'"
                               style="color: #2ba471;border: 1px solid #2ba471;"
                               size="small"
                    >
                        {{ row.shangjspzt }}
                    </el-button>

                    <el-button v-if="row.shangjspzt === '审批中'"
                               style="color: #e9934f;border: 1px solid #e9934f;"
                               size="small"
                    >
                        {{ row.shangjspzt }}
                    </el-button>

                    <el-button v-if="row.shangjspzt === '驳回'"
                               style="color: #d54941;border: 1px solid #d54941;"
                               size="small"
                    >
                        {{ row.shangjspzt }}
                    </el-button>
                </div>
            </template>

            <template #operate="{ row }">
                <div flex
                     justify-around
                     style="width:80%"
                >
                    <div style="color:#DA0004"
                         cursor-pointer
                         @click="doAction(row)"
                    >
                        户型详情
                    </div>

                    <div cursor-pointer>
                        审批详情
                    </div>

                    <div cursor-pointer>
                        审批
                    </div>

                    <div cursor-pointer>
                        驳回
                    </div>
                </div>
            </template>
        </vxe-grid>
    </ElCard>

    <addItem ref="addItemRef"
             v-model="addDialog"
             :data="detail"
             @confirm="getData"
    />
</template>
